<template>
<div>

<el-row>
	<el-form :inline="true" >
		<el-form-item label="数据库：">
			<el-select v-model="database" placeholder="请选择"
			@change="dbchange"
			>
				<el-option
				v-for="item in databaseList"
				:key="item.Database"
				:label="item.Database"
				:value="item.Database">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="数据表：">
			<el-select v-model="tables" multiple placeholder="请选择" 
			@change="change"
			style="width:600px;">
				<el-option
					v-for="item in tableList"
					:key="item.table_name"
					:label="item.table_name"
					:value="item.table_name">
				</el-option>
			</el-select>
		</el-form-item>
	</el-form>
</el-row>

<el-row v-for="(item, index) in tables" :key="index">
	<el-divider content-position="left">{{item}} <span v-if="index == 0">(主表)</span></el-divider>
	<el-checkbox-group v-if="tabledata[item] != undefined"
	v-model="tabledata[item]['chooses']">
		<el-checkbox v-for="(item1, index1) in tabledata[item]['cols']" 
		 :label="item1.column_name">
		 {{item1.column_name + ' : ' + item1.column_comment}}
		 </el-checkbox>

	</el-checkbox-group>
</el-row>

<el-divider></el-divider>

<el-row class="mt10">
	列
	<el-table :data="cols" border style="width:700px;margin-top:5px;">
		<el-table-column prop="tname" label="表名" width="200" align="center"></el-table-column>
		<el-table-column prop="cname" label="列名"  align="center"></el-table-column>
		<el-table-column label="别名" width="100" align="center">
			<template slot-scope="scope">
				<el-input v-if="editCols.index == scope.$index" size="mini"
				 v-model="editCols.asname" placeholder="请输入别名"></el-input>
				<span v-else>{{scope.row.asname}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="100" align="center">
			<template slot-scope="scope">
				<template v-if="editCols.index == scope.$index">
					<el-button type="success" size="mini" 
					icon="el-icon-check" circle
					@click="ok1(scope.row)"
					></el-button>
					<el-button type="danger" size="mini" 
					icon="el-icon-close" circle
					@click="cancel1(scope.row)"
					></el-button>
				</template>
				<template v-else>
					<el-button type="primary" size="mini" 
					icon="el-icon-edit" circle
      				@click="edit1(scope.row, scope.$index)"
      			></el-button>
				</template>
			</template>
		</el-table-column>
	</el-table>
</el-row>


<el-row class="mt10">
	连接
	<el-table :data="conn" border style="width:1030px;margin-top:5px;">
		<el-table-column prop="master" label="主表" align="center"
		width="200"></el-table-column>
		<el-table-column label="主表列" align="center"
		width="200">
			<template slot-scope="scope">
				<el-select v-if="editConn.index == scope.$index" 
				v-model="editConn.mastercol" size="mini">
				    <el-option
				      v-for="item in tabledata[scope.row.master].cols"
				      :key="item.column_name"
				      :label="item.column_name"
				      :value="item.column_name">
				    </el-option>
				</el-select>
				<span v-else>{{scope.row.mastercol}}</span>
			</template>
		</el-table-column>
		<el-table-column label="条件" align="center">
			<template slot-scope="scope">
				<el-select v-if="editConn.index == scope.$index" 
				v-model="editConn.what" size="mini">
				    <el-option
				      v-for="item in connList"
				      :key="item.label"
				      :label="item.label"
				      :value="item.label">
				    </el-option>
				</el-select>
				<span v-else>{{scope.row.what}}</span>
			</template>
		</el-table-column>
		<el-table-column prop="second" label="副表" align="center"
		width="200"></el-table-column>
		<el-table-column label="副表列" align="center"
		width="200">
			<template slot-scope="scope">
				<el-select v-if="editConn.index == scope.$index" 
				v-model="editConn.secondcol" size="mini">
				    <el-option
				      v-for="item in tabledata[scope.row.second].cols"
				      :key="item.column_name"
				      :label="item.column_name"
				      :value="item.column_name">
				    </el-option>
				</el-select>
				<span v-else>{{scope.row.secondcol}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="100" align="center">
			<template slot-scope="scope">
				<template v-if="editConn.index == scope.$index">
					<el-button type="success" size="mini" 
					icon="el-icon-check" circle
					@click="ok2(scope.row)"
					></el-button>
					<el-button type="danger" size="mini" 
					icon="el-icon-close" circle
					@click="cancel2(scope.row)"
					></el-button>
				</template>
				<template v-else>
					<el-button type="primary" size="mini" 
					icon="el-icon-edit" circle
      				@click="edit2(scope.row, scope.$index)"
      			></el-button>
				</template>
			</template>
		</el-table-column>
	</el-table>
</el-row>

<el-row class="mt10">
	条件
	<el-table :data="where" border style="width:700px;margin-top:5px;">
		<el-table-column prop="tname" label="表" align="center"
		width="200"></el-table-column>
		<el-table-column prop="cname" label="列" align="center"
		></el-table-column>
		<el-table-column prop="what" label="条件" align="center"
		width="100">
			<template slot-scope="scope">
				<el-select v-if="editWhere.index == scope.$index" 
				v-model="editWhere.what" size="mini">
					<el-option
				      v-for="item in whereList"
				      :key="item.label"
				      :label="item.label"
				      :value="item.label">
				    </el-option>
				</el-select>
				<span v-else>{{scope.row.what}}</span>
			</template>
		</el-table-column>
		<el-table-column prop="value" label="值" width="100" align="center">
			<template slot-scope="scope">
				<el-input v-if="editWhere.index == scope.$index" size="mini"
				 v-model="editWhere.value" placeholder="值"></el-input>
				<span v-else>{{scope.row.value}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="100" align="center">
			<template slot-scope="scope">
				<template v-if="editWhere.index == scope.$index">
					<el-button type="success" size="mini" 
					icon="el-icon-check" circle
					@click="ok3(scope.row)"
					></el-button>
					<el-button type="danger" size="mini" 
					icon="el-icon-close" circle
					@click="cancel3(scope.row)"
					></el-button>
				</template>
				<template v-else>
					<el-button type="primary" size="mini" 
					icon="el-icon-edit" circle
      				@click="edit3(scope.row, scope.$index)"
      			></el-button>
				</template>
			</template>
		</el-table-column>
	</el-table>
</el-row>

<el-row class="mt10">
	详情条件
	<el-table :data="infowhere" border style="width:500px;margin-top:5px;">
		<el-table-column label="表" align="center"
		width="200">
			<template slot-scope="scope">
				<el-select v-if="editInfoWhere.index == scope.$index" 
				v-model="editInfoWhere.tname" size="mini">
					<el-option
				      v-for="item in tables"
				      :key="item"
				      :label="item"
				      :value="item">
				    </el-option>
				</el-select>
				<span v-else>{{scope.row.tname}}</span>
			</template>
		</el-table-column>
		<el-table-column prop="cname" label="列" align="center">
			<template slot-scope="scope">
				<el-select v-if="editInfoWhere.index == scope.$index" 
				v-model="editInfoWhere.cname" size="mini">
				    <el-option
				      v-for="item in tabledata[editInfoWhere.tname].cols"
				      :key="item.column_name"
				      :label="item.column_name"
				      :value="item.column_name">
				    </el-option>
				</el-select>
				<span v-else>{{scope.row.cname}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="100" align="center">
			<template slot-scope="scope">
				<template v-if="editInfoWhere.index == scope.$index">
					<el-button type="success" size="mini" 
					icon="el-icon-check" circle
					@click="ok4(scope.row)"
					></el-button>
					<el-button type="danger" size="mini" 
					icon="el-icon-close" circle
					@click="cancel4(scope.row)"
					></el-button>
				</template>
				<template v-else>
					<el-button type="primary" size="mini" 
					icon="el-icon-edit" circle
      				@click="edit4(scope.row, scope.$index)"
      			></el-button>
				</template>
			</template>
		</el-table-column>
	</el-table>
</el-row>

<el-divider></el-divider>

<el-row>
	<el-form :inline="true" >
		<el-form-item label="服务名称：">
			<el-input v-model="serviceName" placeholder="输入服务名称"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="save">保存</el-button>
		</el-form-item>
	</el-form>
</el-row>


</div>
</template>

<script>
import Vue from 'vue'

export default {
	
	name : 'dbtableconfig',
	
	data () {
		return {
			id : undefined,

			serviceName : '',

			databaseList : [],	//所有的数据库

		  	tableList : [],		//所有的数据表

		  	database : 'uat_community',		//已经选择的数据库		

		  	tables : [],		//已经选择的数据表

		  	tabledata : {},		//每个数据表的列数据

		  	infoWhere : {},		//详情条件

		  	editCols : {
		  		index : -1,
		  		asname : '',
		  	},

		  	editConn : {
		  		index : -1,
		  		what : '',
		  		mastercol : '',
		  		secondcol : '',
		  	},

		  	editWhere : {
		  		index : -1,
		  		what : '',
		  		value : '',
		  	},

		  	editInfoWhere : {
		  		index : -1,
		  		tname : '',
		  		cname : '',
		  	},

		  	connList : [
	        	{
	        		label : ' left join '
	        	},
	        	{
	        		label : ' right join '
	        	},
	        	{
	        		label : ' inner join '
	        	},
	        ],

	        whereList : [
	        	{
	        		label : ' = '
	        	},
	        	{
	        		label : ' > '
	        	},
	        	{
	        		label : ' < '
	        	},
	        	{
	        		label : ' like '
	        	},
	        ],
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		cols () {
			let arr = [];
			this.tables.forEach(item => {
				if(this.tabledata[item]){
					this.tabledata[item].chooses.forEach(item1 => {
						let obj = Object.assign({
							tname : item,
							cname : item1,
							asname : '',
						}, this.tabledata[item].asname[item1])
						arr.push(obj);
					});
				}
			});
			return arr;
		},

		conn () {
			let arr = [];
			const ts = this.tables;
			if(ts.length == 0) return arr;

			const master = ts[0];
			if(this.tabledata[master] == undefined) return arr;

			for(let i = 1; i < ts.length; i++){
				const second = ts[i];
				if(this.tabledata[second] == undefined) continue;

				let obj = Object.assign({
					master,
					second,
					what : ' left join ',
					mastercol : this.tabledata[master].cols[0].column_name,
					secondcol : this.tabledata[second].cols[0].column_name,
				}, this.tabledata[second].conn)

				arr.push(obj);
			}
			
			return arr;
		},

		where () {
			let arr = [];
			this.tables.forEach(item => {
				const table = this.tabledata[item];
				if(table){
					table.chooses.forEach(item1 => {
						let obj = Object.assign({
							tname : item,
							cname : item1,
							what : ' = ',
							value : '?',
							condition : ' and ',
						}, table.where[item1]);
						arr.push(obj);
					});
				}
			});
			return arr;
		},

		infowhere () {
			let arr = [];

			const ts = this.tables;
			if(ts.length == 0) return arr;

			const master = ts[0];
			if(this.tabledata[master] == undefined) return arr;

			let obj = Object.assign({
				tname : master,
				cname : this.tabledata[master].cols[0].column_name,
			}, this.infoWhere)

			arr.push(obj);
			return arr;
		},
	},

	methods : {
		async init () {

			console.log(this.$route.query.name);

			if(this.$route.query.name != undefined){

				this.serviceName = this.$route.query.name;

				const res = await this.$http('/v1/pn/api/' + this.serviceName, {
					service : 'interface',
					requestType : 'get',
				});

				console.log(res);
				this.id = res.id;

				if(res != undefined){
					const json = JSON.parse(res.json);
					console.log(json);
					this.initTableData(json);
				}
			}
			this.databaseList = await this.$http('databases');

			this.dbchange();
		},

		async dbchange () {
			this.tableList = await this.$http('tables', {
				db : this.database,
			});
		},

		async change () {
			for(let i = 0; i < this.tables.length; i++){
				const tablename = this.tables[i];
				if(this.tabledata[tablename] == undefined){
					const res = await this.$http('cols', {
						tablename,
						db : this.database,
					});
					Vue.set(this.tabledata, tablename, {
						cols : res,
						chooses : [],
						asname : {},
						conn : {},
						where : {},
						infoWhere : {},
					});
				}
			}
		},

		edit1 (item, index) {
			this.editCols.asname = item.asname;
			this.editCols.index = index;
		},

		ok1 (item, index) {
			let obj = Object.assign({}, this.tabledata[item.tname].asname);
			obj[item.cname] = {
				asname : this.editCols.asname
			};
			Vue.set(this.tabledata[item.tname], 'asname', obj);
			this.cancel1();
		},

		cancel1 () {
			this.editCols.asname = '';
			this.editCols.index = -1;
		},

		edit2 (item, index) {
			this.editConn.what = item.what;
			this.editConn.mastercol = item.mastercol;
			this.editConn.secondcol = item.secondcol;
			this.editConn.index = index;
		},

		ok2 (item, index) {
			Vue.set(this.tabledata[item.second], 'conn', {
				what : this.editConn.what,
				mastercol : this.editConn.mastercol,
				secondcol : this.editConn.secondcol,
			});
			this.cancel2();
		},

		cancel2 () {
			this.editConn.index = -1;
		},

		edit3 (item, index) {
			this.editWhere.what = item.what;
			this.editWhere.value = item.value;
			this.editWhere.index = index;
		},

		ok3 (item, index) {
			let obj = Object.assign({}, this.tabledata[item.tname].where);
			obj[item.cname] = {
				what : this.editWhere.what,
				value : this.editWhere.value,
			};

			Vue.set(this.tabledata[item.tname], 'where', obj);
			this.cancel3();
		},

		cancel3 () {
			this.editWhere.index = -1;
		},

		edit4 (item, index) {
			this.editInfoWhere.tname = item.tname;
			this.editInfoWhere.cname = item.cname;
			this.editInfoWhere.index = index;
		},

		ok4 (item, index) {
			this.infoWhere = {
				tname : this.editInfoWhere.tname,
				cname : this.editInfoWhere.cname,
			};
			this.cancel4();
		},

		cancel4 () {
			this.editInfoWhere.index = -1;
		},

		async save () {
			let sql = {
				col : this.cols,
				table : {
					master : this.tables[0],
					condition : [],
				},
				where : this.where,
				infoWhere : this.infowhere[0],
				database : this.database,
			};

			this.conn.forEach(item => {
				let on = [item.mastercol, item.secondcol];
				sql.table.condition.push({
					table : item.second,
					what : item.what,
					on,
				})
			});

			console.log(' ====== sql ======= ');
			console.log(sql);

			const res = await this.$http('createApi', {
				id : this.id,
				name : this.serviceName,
				'sql' : JSON.stringify(sql),
			});

			console.log(res);
			this.$message.success('操作成功');
		},

		async initTableData (json) {

			this.database = json.database;

			this.tables.push(json.table.master);

			json.table.condition.forEach(item => {
				this.tables.push(item.table);
			})

			await this.change();

			json.col.forEach(item => {
				this.tabledata[item.tname].chooses.push(item.cname);
				this.tabledata[item.tname].asname[item.cname] = {
					asname : item.asname,
				}
			});
			
			json.table.condition.forEach(item => {
				this.tabledata[item.table].conn = {
					what : item.what,
					mastercol : item.on[0],
					secondcol : item.on[1],
				}
			});

			json.where.forEach(item => {
				this.tabledata[item.tname].where[item.cname] = {
					what : item.what,
					value : item.value,
				}
			});

			this.infoWhere = json.infoWhere;
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
